<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <title>活动 - 数智化赋能"微情境·微宣讲"红色实践活动</title>

  <!-- 引入Swiper CSS -->
  <link rel="stylesheet" href="../templates/h5/assets/swiper-bundle.min.css">
  <!-- 引入Tailwind CSS -->
  <script src="../templates/h5/assets/tailwindcss3.4.17.css"></script>
  <!-- 引入Font Awesome -->
  <link href="../templates/h5/assets/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">

  <!-- 引入uni-app的模态框样式 -->
  <style>
    .uni-modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9999;
    }
    .uni-modal-content {
      background: white;
      border-radius: 12px;
      padding: 30rpx;
      width: 80%;
      max-width: 300px;
      text-align: center;
    }
    .uni-modal-title {
      font-size: 18px;
      font-weight: bold;
      color: #333;
      margin-bottom: 15px;
    }
    .uni-modal-text {
      font-size: 16px;
      color: #666;
      margin-bottom: 25px;
      line-height: 1.4;
    }
    .uni-modal-buttons {
      display: flex;
      gap: 10px;
    }
    .uni-modal-button {
      flex: 1;
      padding: 10px 0;
      border-radius: 6px;
      font-size: 16px;
      border: none;
      cursor: pointer;
    }
    .uni-modal-button-primary {
      background: #b71211;
      color: white;
    }
    .uni-modal-button-default {
      background: #f0f0f0;
      color: #333;
    }
    .uni-modal-button-single {
      width: 100%;
    }
  </style>

  <script>
    // 配置Tailwind自定义颜色（红色主题）
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#b71211', // 主红色
            secondary: '#FFD700', // 辅助金色
            red: {
              700: '#B91C1C',    // 稍浅红色
              800: '#991B1B',    // 深一点的红色
              900: '#7F1D1D',    // 最深红色
            }
          },
        },
      }
    }
  </script>

  <style type="text/tailwindcss">
    @layer utilities {
      /* 导航栏样式 */
      .nav-item {
        @apply flex flex-col items-center justify-center text-gray-300 active:bg-red-800 h-full;
      }
      .nav-item.active {
        @apply text-white;
      }
      .nav-icon {
        @apply text-lg mb-1;
      }
      .nav-text {
        @apply text-xs;
      }

      /* 内容区块样式 */
      .content-section {
        @apply bg-red-800 rounded-lg p-4 mb-4 border border-red-700;
      }

      /* 标题样式 */
      .section-title {
        @apply text-lg font-bold mb-3 flex items-center text-white;
      }
      .section-title i {
        @apply mr-2 text-secondary;
      }

      /* 封面图渐变阴影 */
      .fullscreen-banner {
        position: relative;
        width: 100vw;
        left: 50%;
        right: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
        /* 调整高度为自适应内容，保持图片完整显示 */
        height: auto;
        max-height: 300px; /* 最大高度限制 */
      }
      .fullscreen-banner img {
        width: 100%;
        height: auto;
        object-fit: contain; /* 确保图片完整显示不裁剪 */
        display: block; /* 移除图片底部间隙 */
      }
      .banner-gradient {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 60%;
        background: linear-gradient(to top, rgba(127, 29, 29, 0.95), transparent);
        pointer-events: none;
      }
    }
  </style>
</head>
<body class="bg-primary text-white">
<div class="max-w-md mx-auto min-h-screen flex flex-col">
  <!-- 全屏活动封面图（带底部渐变）- 移至内容区上方 -->
  <div class="fullscreen-banner overflow-hidden">
    <img src="../templates/h5/assets/pictures/banner3.jpg" alt="活动封面" class="w-full">
    <div class="banner-gradient"></div>
  </div>

  <!-- 页面内容区 -->
  <div class="flex-1 overflow-y-auto p-4 pb-24">
    <!-- 活动主题 -->
    <div class="content-section">
      <h2 class="section-title">
        <i class="fa fa-info-circle"></i>活动主题
      </h2>
      <div class="text-sm text-gray-100 space-y-2">
        <p>数智点亮红色传承，创新砥砺时代英才——数智化赋能"微情境·微宣讲"红色育人行动</p>
      </div>
    </div>

    <!-- 活动介绍 - 图标已改为书本图标 -->
    <div class="content-section">
      <h2 class="section-title">
        <i class="fa fa-book"></i>活动介绍
      </h2>
      <div class="text-sm text-gray-100 space-y-2">
        <p>为深入贯彻《教育强国建设规划纲要（2024-2035 年）》精神，落实 "充分发挥红色资源育人功能""推动思政工作与信息技术深度融合" 的要求，马克思主义学院开展此次红色实践活动。活动围绕中国共产党精神谱系选定主题，结合思政课程内容与石油类、工程类等职业发展方向，借助 AI 工具等数智技术，完成微情境剧本创作、数智化呈现，并开展微宣讲与成果传播，旨在通过数智化手段传承红色基因，培养时代英才。</p>
        <p>主要实践任务分为四阶段：</p>
        <p>1.组建团队与选定主题：思政课老师推荐优秀团队，结合思政课内容从中国共产党精神谱系选方向，明确分工，按时提交表格并加入答疑群。</p>
        <p>2.数智化探究与剧本创作：结合多门思政课程相关章节，查阅党史、行业英雄事迹文献，结合职业发展方向撰写差异化微情境剧本，借助 AI 工具优化细节。</p>
        <p>3.微情境数智化呈现：将剧本转化为 3-5 分钟微短剧，鼓励采用 "AI 虚拟场景""红色任务闯关" 等沉浸式形式，用短视频剪辑工具、AI 互动技术制作，确保内容有感染力且符合青年语境。</p>
        <p>4.微宣讲与成果传播：凝练 1000 字以内宣讲文稿，面向班级、社团或社区宣讲，同时上传微情境、微宣讲视频至 "展示平台"，参与评选以扩大传播效果。</p>
      </div>
    </div>

    <!-- 活动时间 -->
    <div class="content-section">
      <h2 class="section-title">
        <i class="fa fa-calendar"></i>活动时间
      </h2>
      <div class="text-sm text-gray-100 space-y-3">
        <div class="flex justify-between">
          <span class="w-1/3">征集报名阶段</span>
          <span class="w-2/3 text-secondary">2025年10月30日前</span>
        </div>
        <div class="flex justify-between">
          <span class="w-1/3">作品创作阶段</span>
          <span class="w-2/3 text-secondary">2025年10月30日-11月20日</span>
        </div>
        <div class="flex justify-between">
          <span class="w-1/3">作品提交阶段</span>
          <span class="w-2/3 text-secondary">2025年11月21日18:00前</span>
        </div>
        <div class="flex justify-between">
          <span class="w-1/3">作品展示阶段</span>
          <span class="w-2/3 text-secondary">2025年11月22日-12月14日</span>
        </div>
        <div class="flex justify-between">
          <span class="w-1/3">作品表彰阶段</span>
          <span class="w-2/3 text-secondary">2025年12月15日-12月20日</span>
        </div>
      </div>
    </div>

    <!-- 活动规则 -->
    <div class="content-section">
      <h2 class="section-title">
        <i class="fa fa-list-alt"></i>活动规则
      </h2>
      <div class="text-sm text-gray-100 space-y-2">
        <ol class="list-decimal ml-5 space-y-2">
          <li>创作需规范创新运用 AI 工具，体现团队自主创新与核心贡献，严禁抄袭等学术不端行为。</li>
          <li>主题需从中国共产党人精神谱系中选定，重点围绕建党精神、塞罕坝精神、抗战精神、劳模精神（劳动精神、工匠精神）、大庆精神（铁人精神）等。</li>
          <li>作品需清晰标注对应思政课程的具体章节名称（如《毛泽东思想和中国特色社会主义理论体系概论》第一章第一节），确保与课程深度融合。</li>
          <li>所有作品（剧本、视频等）需传递正确价值观，杜绝侮辱、歧视、敏感政治内容及其他不当表达。</li>
          <li>描述历史人物、事件时，需严格依据主流权威史料，禁止主观臆断。</li>
          <li>评选从 "教师专业评价、学生朋辈互评、作品成果影响力（浏览量、点赞量、转发量等）" 三方面综合考量。</li>
          <li>活动倡导公平竞争，严禁任何刷分行为，违规者将取消资格并承担相应后果。</li>
          <li>作品提交需符合格式要求：微情景剧本为 Word 格式（标注团队、负责人、成员、指导教师信息），微情境视频与微宣讲视频为 MP4 格式（分辨率不低于 1080P，500MB 以下），宣讲文稿为 Word 格式。</li>
        </ol>
      </div>
    </div>

    <!-- 活动奖品 -->
    <div class="content-section">
      <h2 class="section-title">
        <i class="fa fa-trophy"></i>活动奖品
      </h2>
      <div class="space-y-4">
        <!-- 一等奖 -->
        <div class="flex items-center bg-red-900 rounded p-3">
          <div class="w-10 h-10 rounded-full bg-secondary text-red-900 flex items-center justify-center font-bold mr-3">1</div>
          <div class="flex-1">
            <div class="font-medium text-white">优秀实践团队（一等奖）（1 组）</div>
            <div class="text-xs text-gray-200">定制书包 + 荣誉证书</div>
          </div>
        </div>

        <!-- 二等奖 -->
        <div class="flex items-center bg-red-900 rounded p-3">
          <div class="w-10 h-10 rounded-full bg-gray-300 text-red-900 flex items-center justify-center font-bold mr-3">2</div>
          <div class="flex-1">
            <div class="font-medium text-white">优秀实践团队（二等奖）（3 组）</div>
            <div class="text-xs text-gray-200">精美钢笔 + 荣誉证书</div>
          </div>
        </div>

        <!-- 三等奖 -->
        <div class="flex items-center bg-red-900 rounded p-3">
          <div class="w-10 h-10 rounded-full bg-amber-700 text-white flex items-center justify-center font-bold mr-3">3</div>
          <div class="flex-1">
            <div class="font-medium text-white">优秀实践团队（三等奖）（6 组）</div>
            <div class="text-xs text-gray-200">雨伞 + 荣誉证书</div>
          </div>
        </div>

        <!-- 优秀组长 -->
        <div class="flex items-center bg-red-900 rounded p-3">
          <div class="w-10 h-10 rounded-full bg-red-700 text-white flex items-center justify-center font-bold mr-3">
            <i class="fa fa-certificate"></i>
          </div>
          <div class="flex-1">
            <div class="font-medium text-white">优秀组长（10名）</div>
            <div class="text-xs text-gray-200">U 盘 + 荣誉证书</div>
          </div>
        </div>

        <!-- 优秀组员 -->
        <div class="flex items-center bg-red-900 rounded p-3">
          <div class="w-10 h-10 rounded-full bg-red-700 text-white flex items-center justify-center font-bold mr-3">
            <i class="fa fa-certificate"></i>
          </div>
          <div class="flex-1">
            <div class="font-medium text-white">优秀组员（10名）</div>
            <div class="text-xs text-gray-200">荣誉证书</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 参与方式 -->
    <div class="content-section">
      <h2 class="section-title">
        <i class="fa fa-paper-plane"></i>参与方式
      </h2>
      <div class="text-sm text-gray-100 space-y-2">
        <p>1. 微信扫描活动二维码</p>
        <p>2. 点击菜单栏"活动-立即报名参赛"，填写作品信息并上传视频</p>
        <p>3. 上传作品需包含：作品名称、作品封面、联系人、作品文件、其他附件等</p>
        <p>4. 提交后将收到审核通知，审核通过即正式参赛</p>

        <div class="mt-3 pt-3 border-t border-red-700">
          <button id="signupBtn" class="w-full bg-secondary text-red-900 py-2 rounded font-medium text-sm">
            立即报名参赛
          </button>
        </div>
      </div>
    </div>

    <!-- 联系咨询 -->
    <div class="content-section pb-10">
      <h2 class="section-title">
        <i class="fa fa-phone"></i>联系咨询
      </h2>
      <div class="text-sm text-gray-100 space-y-3">
        <p><i class="fa fa-envelope-o mr-2 text-secondary"></i>邮箱：2014998483@qq.com</p>
      </div>
    </div>
  </div>

  <!-- 底部固定导航栏 -->
  <div class="fixed bottom-0 left-0 right-0 max-w-md mx-auto bg-red-900 border-t border-red-700 z-50 h-16 flex">
    <a href="/h5/index" class="nav-item active flex-1">
      <i class="nav-icon fa fa-home"></i>
      <span class="nav-text">首页</span>
    </a>
    <a href="/h5/index_huodong" class="nav-item flex-1">
      <i class="nav-icon fa fa-calendar"></i>
      <span class="nav-text">活动</span>
    </a>
    <a href="/h5/index_paihangbang" class="nav-item flex-1">
      <i class="nav-icon fa fa-bar-chart"></i>
      <span class="nav-text">排行榜</span>
    </a>
    <a href="/h5/index_yonghu" class="nav-item flex-1">
      <i class="nav-icon fa fa-user"></i>
      <span class="nav-text">我的</span>
    </a>
  </div>
</div>

<!-- 登录提示模态框 -->
<div id="loginModal" class="uni-modal" style="display: none;">
  <div class="uni-modal-content">
    <div class="uni-modal-title">提示</div>
    <div class="uni-modal-text">请先登录，登录后可完成报名</div>
    <div class="uni-modal-buttons">
      <button class="uni-modal-button uni-modal-button-default" onclick="closeLoginModal()">取消</button>
      <button class="uni-modal-button uni-modal-button-primary" onclick="goToLogin()">去登录</button>
    </div>
  </div>
</div>

<!-- 时间提示模态框 -->
<div id="timeModal" class="uni-modal" style="display: none;">
  <div class="uni-modal-content">
    <div class="uni-modal-title">提示</div>
    <div id="timeModalText" class="uni-modal-text"></div>
    <div class="uni-modal-buttons">
      <button class="uni-modal-button uni-modal-button-primary uni-modal-button-single" onclick="closeTimeModal()">确定</button>
    </div>
  </div>
</div>

<script>
  // 报名时间配置 - 根据"征集报名阶段"时间设置
  const SIGNUP_CONFIG = {
    // 报名开始时间：假设从活动开始就可以报名，设为当前年份的1月1日
    startTime: new Date('2025-01-01 00:00:00'),
    // 报名截止时间：2025年10月30日 23:59:59（征集报名阶段结束）
    endTime: new Date('2025-12-31 23:59:59')
  };

  document.addEventListener('DOMContentLoaded', function() {
    // 导航栏切换效果
    const navItems = document.querySelectorAll('.nav-item');
    navItems.forEach(item => {
      item.addEventListener('click', function(e) {
        navItems.forEach(nav => nav.classList.remove('active'));
        this.classList.add('active');
      });
    });

    // 报名按钮点击事件
    const signupBtn = document.getElementById('signupBtn');
    signupBtn.addEventListener('click', function() {
      handleSignupClick();
    });

    // 初始化时检查报名时间状态
    updateSignupButtonStatus();

    // 调试信息
    console.log('报名时间状态:', getSignupTimeStatus());
    console.log('当前时间:', new Date().toLocaleString('zh-CN'));
    console.log('报名开始时间:', SIGNUP_CONFIG.startTime.toLocaleString('zh-CN'));
    console.log('报名结束时间:', SIGNUP_CONFIG.endTime.toLocaleString('zh-CN'));
  });

  // 检查登录状态
  function checkLoginStatus() {
    const token = localStorage.getItem("token");
    return token && token !== "" && token !== "undefined";
  }

  // 检查报名时间状态
  function checkSignupTime() {
    const now = new Date();

    if (now < SIGNUP_CONFIG.startTime) {
      return 'not_started'; // 报名未开始
    } else if (now > SIGNUP_CONFIG.endTime) {
      return 'ended'; // 报名已结束
    } else {
      return 'available'; // 报名进行中
    }
  }

  // 获取详细的报名时间状态信息
  function getSignupTimeStatus() {
    const now = new Date();
    const status = checkSignupTime();

    let message = '';
    let daysRemaining = 0;

    if (status === 'not_started') {
      daysRemaining = Math.ceil((SIGNUP_CONFIG.startTime - now) / (1000 * 60 * 60 * 24));
      message = `报名将于 ${formatDate(SIGNUP_CONFIG.startTime)} 开始，还有 ${daysRemaining} 天`;
    } else if (status === 'ended') {
      daysRemaining = Math.ceil((now - SIGNUP_CONFIG.endTime) / (1000 * 60 * 60 * 24));
      message = `报名已于 ${formatDate(SIGNUP_CONFIG.endTime)} 结束，已过去 ${daysRemaining} 天`;
    } else {
      daysRemaining = Math.ceil((SIGNUP_CONFIG.endTime - now) / (1000 * 60 * 60 * 24));
      message = `报名进行中，距离结束还有 ${daysRemaining} 天`;
    }

    return {
      status: status,
      message: message,
      daysRemaining: daysRemaining
    };
  }

  // 更新报名按钮状态
  function updateSignupButtonStatus() {
    const signupBtn = document.getElementById('signupBtn');
    const timeStatus = checkSignupTime();

    if (timeStatus === 'not_started') {
      signupBtn.textContent = '报名未开始';
      signupBtn.classList.add('bg-gray-400', 'cursor-not-allowed');
      signupBtn.classList.remove('bg-secondary', 'hover:bg-yellow-600');
    } else if (timeStatus === 'ended') {
      signupBtn.textContent = '报名已结束';
      signupBtn.classList.add('bg-gray-400', 'cursor-not-allowed');
      signupBtn.classList.remove('bg-secondary', 'hover:bg-yellow-600');
    } else {
      signupBtn.textContent = '立即报名参赛';
      signupBtn.classList.remove('bg-gray-400', 'cursor-not-allowed');
      signupBtn.classList.add('bg-secondary');
    }
  }

  // 处理报名点击
  function handleSignupClick() {
    const timeStatus = checkSignupTime();

    // 首先检查报名时间
    if (timeStatus === 'not_started') {
      const statusInfo = getSignupTimeStatus();
      showTimeModal(`报名尚未开始，请在报名时间内参与\n\n${statusInfo.message}`);
      return;
    } else if (timeStatus === 'ended') {
      const statusInfo = getSignupTimeStatus();
      showTimeModal(`报名已结束，感谢您的关注\n\n${statusInfo.message}`);
      return;
    }

    // 时间合适，再检查登录状态
    if (checkLoginStatus()) {
      // 已登录，跳转到报名页面
      window.location.href = "/h5/index_baoming";
    } else {
      // 未登录，显示登录提示
      showLoginModal();
    }
  }

  // 显示登录提示模态框
  function showLoginModal() {
    const modal = document.getElementById('loginModal');
    modal.style.display = 'flex';
  }

  // 关闭登录提示模态框
  function closeLoginModal() {
    const modal = document.getElementById('loginModal');
    modal.style.display = 'none';
  }

  // 显示时间提示模态框
  function showTimeModal(message) {
    const modal = document.getElementById('timeModal');
    const textElement = document.getElementById('timeModalText');
    textElement.textContent = message;
    modal.style.display = 'flex';
  }

  // 关闭时间提示模态框
  function closeTimeModal() {
    const modal = document.getElementById('timeModal');
    modal.style.display = 'none';
  }

  // 跳转到登录页面
  function goToLogin() {
    closeLoginModal();
    // 跳转到登录页面，这里假设登录页面路径为 /h5/index_yonghu
    window.location.href = "/h5/index_yonghu";
  }

  // 点击模态框外部关闭
  document.getElementById('loginModal').addEventListener('click', function(e) {
    if (e.target === this) {
      closeLoginModal();
    }
  });

  document.getElementById('timeModal').addEventListener('click', function(e) {
    if (e.target === this) {
      closeTimeModal();
    }
  });

  // 监听登录状态变化（如果其他页面登录成功）
  window.addEventListener('storage', function(e) {
    if (e.key === 'token' && e.newValue) {
      console.log('检测到登录状态变化，token已设置');
    }
  });

  // 格式化日期显示
  function formatDate(date) {
    return date.getFullYear() + '年' +
            (date.getMonth() + 1) + '月' +
            date.getDate() + '日';
  }

  // 页面加载时显示当前时间状态
  window.addEventListener('load', function() {
    const statusInfo = getSignupTimeStatus();
    console.log('报名时间状态:', statusInfo);
  });
</script>
</body>
</html>